<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <page-tools>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addPermission('0')"
            >添加权限</el-button
          >
        </template>
      </page-tools>
      <!-- 表格 -->
      <el-table
        border
        :data="permissionList"
        row-key="id"
        stripe
        default-expand-all
      >
        <el-table-column align="center" prop="name" label="名称" />
        <el-table-column align="center" prop="code" label="标识" />
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" label="操作">
          <template #default="{row}">
            <el-button type="text" @click="addPermission(row.id, 2)"
              >添加</el-button
            >
            <el-button type="text" @click="editPermission(row.id)"
              >编辑</el-button
            >
            <el-button type="text" @click="delPermission(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <AddPermission
      :show-dialog.sync="showDialog"
      :form-data.sync="formData"
      @reload="getPermissionListFn"
    ></AddPermission>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import {
  getPermissionListAPI,
  delPermissionAPI,
  getPermissionDetailAPI
} from '@/api/permission'
import { formatTree } from '@/utils/tree'
import { IDeparts } from '@/model/interface/departments'
import AddPermission from './components/add-permission.vue'

@Component({ name: 'permission', components: { AddPermission } })
export default class extends Vue {
  permissionList: Array<IDeparts> = [] // 权限列表
  showDialog = false
  formData = {
    name: '', // 名称
    code: '', // 标识
    description: '', // 描述
    type: 1, // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
    pid: '0', // 因为做的是树 需要知道添加到哪个节点下了
    enVisible: '0' // 开启
  }

  @Watch('showDialog')
  onDialogChange(val: boolean) {
    if (!val) {
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: 1, // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '0', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0' // 开启
      }
    }
  }

  created() {
    this.getPermissionListFn()
  }

  // 获取权限列表
  async getPermissionListFn() {
    try {
      const res = await getPermissionListAPI()
      this.permissionList = formatTree(res, '0')
    } catch (e) {
      console.log(e)
    }
  }

  // 删除操作
  async delPermission(id: string) {
    try {
      await this.$confirm('确定要删除该数据吗')
      await delPermissionAPI(id)
      this.getPermissionListFn() // 重新请求列表
      this.$message.success('删除成功')
    } catch (error) {
      this.$message.info(error)
      console.log(error)
    }
  }

  // 添加权限
  addPermission(pid: string, type = 1) {
    this.formData.pid = pid
    this.formData.type = type
    this.showDialog = true
  }

  // 修改权限
  async editPermission(id: string) {
    // 根据获取id获取详情
    this.showDialog = true
    this.formData = await getPermissionDetailAPI(id)
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
